import React, { Component } from 'react'
import { Form, Icon, Input, Button , Row,Col, Upload ,message
,Spin
} from 'antd';
import {UPDATEURLIMG} from '../../../api/config/config';
import {saveHomeVideo} from '../../../api/request/home';
let id = 0;
@Form.create()
 class Index extends Component {
   constructor(){
     super()
     this.state={
       loading:false
     }
   }
    remove = k => {
        const { form } = this.props;
        // can use data-binding to get
        const Keys = form.getFieldValue('Keys');
        // We need at least one passenger
        if (Keys.length === 1) {
          return;
        }
    
        // can use data-binding to set
        form.setFieldsValue({
            Keys: Keys.filter(key => key !== k),
        });
      };
      add = () => {
        const { form } = this.props;
        // can use data-binding to get
        const Keys = form.getFieldValue('Keys');
        const nextKeys = Keys.concat(id++);
        // can use data-binding to set
        // important! notify form to detect changes
        form.setFieldsValue({
            Keys: nextKeys,
        });
      };
      normFile = e => {
        console.log('Upload event:', e);
        if (Array.isArray(e)) {
          console.log('object eeeee:', e);
          return e;
        }
        return e && e.fileList;
      };
    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
          if (!err) {
            const {image_title} = values
            if (!image_title[0].response) {
              message.error('注意图片上传失败了')
              return
            }
            this.setState({
              loading:true
            })
            const data = image_title[0].response.data.filePath
            values.image_title = data
            saveHomeVideo(values)
            .then(res=>{
              console.log('res :', res);
              message.success(res.msg)
              this.setState({
                loading:false
              })
            })
          
          }
        });
      };

    render() {

        const { getFieldDecorator,getFieldValue  } = this.props.form;
        getFieldDecorator('Keys', { initialValue: [] });
        const Keys = getFieldValue('Keys');
        const formItems = Keys.map((k, index) => (
          <Form.Item
            label={index === 0 ? '视频类别' : ''}
            required={false}
            key={k}
          >
            {getFieldDecorator(`classify[${k}]`, {
              validateTrigger: ['onChange', 'onBlur'],
              rules: [
                {
                  required: true,
                  whitespace: true,
                  message: "请输入分类",
                },
              ],
            })(<Input placeholder="分类" style={{ width: '40%', marginRight: 8 }} />)}
            {Keys.length > 1 ? (
              <Icon
                className="dynamic-delete-button"
                type="minus-circle-o"
                onClick={() => this.remove(k)}
              />
            ) : null}
          </Form.Item>
        ));
        return (
            <>
        <Row >
        <Spin spinning={this.state.loading}>
          <h2> 首页视频板块编辑  </h2>
        <Col span={12}>
          <Form onSubmit={this.handleSubmit} className="login-form" >
                <Form.Item>
                {getFieldDecorator('author', {
                    rules: [{ required: true, message: '请输入作者名!' }],
                })(
                    <Input
                    prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                    placeholder="作者名"
                    />,
                )}
                </Form.Item>
                <Form.Item>
                {getFieldDecorator('title', {
                    rules: [{ required: true, message: '请输入标题!' }],
                })(
                    <Input
                    prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                    placeholder="标题"
                    />,
                )}
                </Form.Item>
                {formItems}
                <Form.Item
                >
                    <Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
                        <Icon type="plus" />添加分类
                    </Button>
                </Form.Item>
                <Form.Item label="头像" extra="">
                  {getFieldDecorator('image_title', {
                    valuePropName: 'fileList',
                    getValueFromEvent: this.normFile,
                  })(
                    <Upload name="file" action={UPDATEURLIMG} listType="picture">
                      <Button>
                        <Icon type="upload" /> 头像上传
                      </Button>
                    </Upload>,
                  )}
                </Form.Item>
                <Form.Item label="在线地址">
                   {getFieldDecorator('item_href' ,{rules: [{ required: true, message: '请输入标题!' }]})(
                      <Input
                      placeholder="在线地址"
                      ></Input>
                   )}
                </Form.Item>
                <Form.Item label="点评">
                   {getFieldDecorator('intro' ,{rules: [{ required: true, message: '请输入标题!' }]})(
                      <Input.TextArea
                  
                      autoSize={{ minRows: 2, maxRows: 6 }}></Input.TextArea>
                   )}
                </Form.Item>
                <Form.Item>
                <Button type="primary"  onClick={()=>{this.props.form.resetFields()}} className="login-form-button">
                   重置
                </Button>
                <Button type="primary" style={{marginLeft:8}} htmlType="submit" className="login-form-button">
                   保存
                </Button>
                </Form.Item>
          </Form>
          </Col>
          </Spin>
        </Row>
            </>
        )
    }
}
export default Index